﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="EpiMapit.Web._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript" src="Scripts/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAgcYcJCZBcN1_RyUXq8y2tRS9vwJ9PpSs6OyBV2zXS785ZUp5tBQmjRknHCLMvR8Nj835k8WzDWg2gw"></script>
    <script type="text/javascript">
        google.load("maps", "2");
      
        var map;
   
        // Call this function when the page has been loaded
        function initialize() {
            map = new google.maps.Map2(document.getElementById("map"));
            map.addControl(new GLargeMapControl());
            map.addControl(new GMapTypeControl());
            map.addControl(new GScaleControl());	
            map.addControl(new GOverviewMapControl());
            map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);
        }
        google.setOnLoadCallback(initialize);
      
        function loadKml() {
            var kmlUrl = $("#kmlUrl").val();
            $.get("KmlHandler.ashx", kmlUrl, function(data) {
                // eval(data) is
                // class KmlResponse {
                //   Date[] Dates;
                //   float[] Distances;
                //   string FirstKml
                // }
                
                var dateSelect = $("#date");
                var distanceSelect = $("#distance");
                var response = eval(data);

                for(var i = 0; i < response.Dates.length; i++) {
                    dateSelect.append("<option>" + response.Dates[i] + "</option>");
                }

                $("#controls").show();
               
            }, "json");
        }
    </script>
</head>
<body>
    <form onsubmit="loadKml(); return false;">
        <div>
            Kml Url: <input type="text" id="kmlUrl" />
            <input type="submit" value="Load" />
        </div>
        
        <div id="controls" style="display:none; margin:10px">
            Date:
                <select name="date">
                </select>
            Distance:
                <select name="distance">
                </select>
        </div>
    </form>

    <div id="map" style="width:640px; height:480px;">
    
    </div>
</body>
</html>
